<template>
  <header>
    <h2>TodoList</h2>
    <div class="box">
      <input type="text" 
      placeholder="请输入待办事项..."
      v-model.trim="content"
      @keydown.enter="handleAddTodo"
      />
      <button @click="handleAddTodo">添加</button>
    </div>
  </header>
</template>

<script setup>
import {ref} from 'vue'

const content = ref('')

const emits = defineEmits(['addTodo'])
const handleAddTodo = ()=>{
  if(!content.value){
    alert('请输入待办事项!')
    return
  }

  //向父组件传递一个对象
  const todo = {id:Date.now(),content:content.value,done:false,edit:false}
  emits('addTodo',todo)

  content.value = ''
}
</script>

<style scoped>
header {
  padding: 5px 0 10px;
  background-color: #0b87ff;
  color: #f0f8ff;
  text-align: center;
}
header h2 {
  font-size: 24px;
}
header .box {
  margin-top: 10px;
  display: flex;
  gap: 5px;
  justify-content: center;
}
header .box input {
  width: 300px;
  height: 30px;
  padding: 0 10px;
  border-radius: 3px;
  outline: none;
  border: solid 1px white;
}
header .box button {
  display: inline-block;
  width: 80px;
  background-color: #eee;
  color: #0b87ff;
  line-height: 30px;
  border: none;
  border-radius: 3px;
}
header .box button:hover {
  cursor: pointer;
  background-color: #fff;
  color: #ff6700;
}
</style>
